<template>
	<view class="big-box flex-col align-center">
		<!-- <top-navigation bgColor='url(/static/images/homes/background.png)' :isBack="false">
			<text slot='left-slot' class="left-slot">测试</text>
		</top-navigation> -->

		<!-- #ifndef APP-PLUS -->
		<view v-if="downloadShow" class="nav-download justify-between align-center">
			<view @tap="$navto('/pages/download/download')" class="nav-download-logo justify-start align-center">
				<image src="/static/logo.png" mode=""></image>
				魔幻世界APP已上线，去下载吧~
			</view>
			<image @tap="downloadClose" class="nav-download-close" src="/static/images/down/close.svg" mode=""></image>
		</view>
		<!-- #endif  -->
		<view class="banner">
			<u-swiper bgColor='#16161e' :list="focus" :current='current' circular keyName="image" height="1100rpx"
				@change="bannerChange" @click="bannerTap"></u-swiper>
			<image @tap="bannnerBtn(-1)" class="l-banner-btn" src="/static/images/home/l-arrowhead.png" mode=""></image>
			<image @tap="bannnerBtn(1)" class="r-banner-btn" src="/static/images/home/r-arrowhead.png" mode=""></image>
		</view>
		<view class="menu-box justify-between" v-if="top_goods.length">
			<view class="" @tap="payGoods(0)">
				<image class="grid-l" :src="top_goods[0].image" mode=""></image>
			</view>
			<view class="flex-col justify-between">
				<image @tap="payGoods(1)" class="grid-r" :src="top_goods[1].image" mode=""></image>
				<image @tap="payGoods(2)" class="grid-r" :src="top_goods[2].image" mode=""></image>
			</view>
		</view>
		<view class="top-box">
			<image class="hot-title" src="/static/images/home/hot-title.png" mode=""></image>

		</view>
		<view class="feature justify-between">
			<view class="feature-box" @click="featureTap(index)" v-for="item,index in hot_goods" :key="index">
				<!-- 彩色标签 -->
				<view class="label">
					<image class="lable-bg" src="/static/images/home/label.png" mode=""></image>
					<view class="num">
						{{item.icon_text}}
					</view>
				</view>
				<image class="hot-category" :src="item.image" mode=""></image>
				<view class="info">
					<view class="feature-title u-line-2">
						{{item.name}}
					</view>
					<view class="price justify-start align-end">
						<text class="money">¥</text> {{item.price}}
					</view>
				</view>

			</view>
		</view>
		<!-- 联系客服弹出层-->
		<u-popup :show="moneyShow" mode="center" @close="moneyShow=false" round="40rpx">
			<view class="popup-one-box flex-col align-center">
				<view class="pop-box-title">
					联系客服
				</view>
				<view class="popup-box-input ">
					<view class="popup-box-input-server justify-between ">
						<view class="justify-start align-center">
							<image src="/static/images/homes/icon-phone.png" mode=""></image>
							客服电话
						</view>
						<view class="popup-box-phone align-center">
							024-12345678<image src="/static/images/homes/icon-more.png" mode=""></image>
						</view>
					</view>
					<view class=" justify-between align-center">
						<view class="justify-start">
							<image src="/static/images/homes/icon-service.png" mode=""></image>
							在线客服
						</view>
						<view class="">
							<image src="/static/images/homes/icon-more.png" mode=""></image>
						</view>
					</view>
				</view>

				<view class="popup-box-cancel align-center justify-center" @click="moneyShow=false">
					取消
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				downloadShow: true,
				current: 0,
				moneyShow: false,
				loading: false,
				hot_goods: [],

				focus: [],
				top_goods: []


			}
		},
		created() {
			this.getIndex()
			const value = uni.getStorageSync('downloadShow')
			if (value) {
				this.downloadShow = !value
			}
		},
		methods: {
			downloadClose() {
				this.downloadShow = false
				uni.setStorageSync('downloadShow', true)
			},
			async getIndex() {
				let url = '/api/v1/index'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url)
				if (code == 200) {
					console.log(data, '静态资源');
					this.loading = true
					this.focus = data.focus
					this.hot_goods = data.hot_goods
					this.top_goods = data.top_goods
					// this.imgList = data.list || []
					this.$emit('loadingEnd')
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
			},
			payGoods(index) {
				if(index==0){
					if (this.top_goods[index].link_type == 'tarbar') {
						this.$emit('onTabbar', 1)
					}
				}else{
					uni.showToast({
						icon:'none',
						title:'稍后开放'
					})
				}
				
			},
			bannnerBtn(e) {
				console.log(e, 'bannnerBtn');
				if ((this.current + 1) == this.focus.length) {
					// 到达最后一个应该去第一个
					this.current = e > 0 ? 0 : this.current + e
					return
				}
				if (this.current == 0) {
					this.current = e > 0 ? this.current + e : this.focus.length - 1
					return
				}
				this.current += e
				console.log('this.current', this.current);
				// banner按钮点击
			},
			bannerTap(e) {
				console.log(this.focus[e], 'banner点击');
				this.focus[e].link_type == 'goods' ? this.$navto('/pages/star-map/paly-func?map=' + 1) : ''


				// banner点击
			},
			bannerChange() {
				// banner改变
			},
			featureTap(e) {
				this.payGoods(e)
				console.log(e);
				if (e > 1) {
					return
				}
				switch (e) {
					case 0:
						// 资金账户
						this.$navto('/pages/home/fund-account/index', false)
						break;
					case 1:
						// 扫码核销
						this.$navto('/pages/home/scan-code/index', false)
						break;
					case 2:
						// 推广营销
						this.$navto('/pages/home/marketing/index', false)
						break;
					case 3:
						// 会员管理
						this.$navto('/pages/home/member-management/index', false)
						break;
					case 4:
						// 会员中心
						this.$navto('/pages/home/member-center/index', false)
						break;
					case 5:
						// 会员中心
						this.$navto('/pages/home/order-management/index', false)
						break;
					case 6:
						// 渠道码
						this.$navto('/pages/home/channel-code/index', false)
						break;
					case 7:
						// 渠道码
						this.moneyShow = true
						break;
				}
			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		background: #16161e;

		.nav-download {
			padding: 0 34rpx;
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 106rpx;
			z-index: 999999999;
			background-color: rgba(207, 227, 255, .19);
			backdrop-filter: blur(10px);

			.nav-download-logo {
				font-size: 30rpx;
				color: #FFF;

				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 8rpx;
					margin-right: 22rpx;
				}
			}

			.nav-download-close {
				width: 48rpx;
				height: 48rpx;

			}
		}

		.menu-box {
			background: #16161e;
			width: 100%;
			padding: 0 30rpx;
			position: relative;
			z-index: 2;

			.grid-l {
				width: 340rpx;
				height: 456rpx;
			}

			.grid-r {
				width: 326rpx;
				height: 218rpx;
			}
		}

		.banner {
			background: #16161e;
			margin-bottom: -50rpx;
			width: 100vw;
			position: relative;

			.l-banner-btn {
				width: 80rpx;
				height: 80rpx;
				top: 19.4375rem;
				left: 0;
				position: absolute;
				padding: 40rpx;
				z-index: 1111;
				box-sizing: content-box;
			}

			.r-banner-btn {
				width: 80rpx;
				height: 80rpx;
				top: 19.4375rem;
				right: 0;
				position: absolute;
				padding: 40rpx;
				z-index: 1111;
				box-sizing: content-box;
			}
		}
	}

	.top-box {
		margin-top: 48rpx;
		width: 690rpx;

		.hot-title {
			width: 156rpx;
			height: 35rpx;
		}



	}

	.feature {
		margin-top: 48rpx;
		flex-wrap: wrap;
		padding: 0 30rpx;
		box-sizing: border-box;

		.feature-title {
			color: #fff;
			font-size: .875rem;
			line-height: 1.1875rem;
		}

		.price {
			font-weight: bold;
			font-size: 36rpx;
			color: #27ff92;
			position: absolute;
			bottom: 24rpx;
			left: 24rpx;

			.money {
				font-size: 28rpx;

			}
		}

		.feature-box {
			margin-bottom: 32rpx;
			width: 328rpx;
			background: #20202c;
			box-shadow: 0rpx 6rpx 35rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;
			position: relative;
			overflow: hidden;

			.label {
				position: absolute;
				top: 0;
				right: 0;

				.lable-bg {
					width: 150rpx;
					height: 40rpx;
					z-index: 90;
				}

				.num {
					position: absolute;
					top: 45%;
					transform: translate(0, -50%);
					right: 10rpx;
					z-index: 100;
					font-weight: 700;
					font-size: 20rpx;
					color: #000;
					padding: 0
				}
			}

			.hot-category {
				width: 328rpx;
				height: 328rpx;
			}

			.info {
				padding: 22rpx 24rpx 0;
				height: 190rpx;
			}
		}

	}

	.popup-one-box {
		padding: 0rpx 52rpx;
		width: 630rpx;
		height: 436rpx;
		background: #FFF;
		box-shadow: 0px 6rpx 14rpx 0px rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;

		// 添加红包金额样式
		.pop-box-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			margin: 47rpx 0 67rpx;
		}



		.popup-box-cancel {
			border: 2rpx solid $uni-text-color-title;
			border-radius: 12rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: $uni-text-color-title;
			width: 378rpx;
			height: 72rpx;
		}




		.popup-box-input {
			width: 100%;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 61rpx;

			image {
				width: 44rpx;
				height: 44rpx;
			}

			.popup-box-input-server {
				margin-bottom: 36rpx;

				.popup-box-phone {
					color: $uni-text-color-title;
					font-size: 28rpx;
					font-weight: 500;
				}
			}
		}
	}
</style>